Exporting favourite places from Here Map and importing to google map

Here map allows you to set your favorite places but if you want to migrate from Here map it does not allow you to export your favorite places. So here I am showing how you can export data and get imported to google map. Once it is imported to google map you can export and import in any map.

Please follow the below steps to export it:
1. Login to Here map Click.
2. Click the link  “Favourite Place” it will open your favourite places in JSON format. Right click on page and save it as “favorite_places.json“.

Here map favourite places

3. Now you need to convert JSON file to csv so that we can import it to google map. Go to site https://json-csv.com/ and upload your file “favorite_places.json” and it will show you your data in tabular format.
4. Click on “Download” button to to get downloaded to your local system.
Note: We have many sites online which allows you to convert json to csv file. few more sites are like:
A. http://www.convertcsv.com/json-to-csv.htm
B. http://www.onlinejsonconvert.com/json-csv.php
4. Login to google maps. And to go my maps.
5. Click on “Create A New Map”, it will take you to new page.
6. Click on “import” link (see the screen shot below), it will open a popup with option to select
file of type CSV, XLSX, KML or GPX to import places.

google map Import

7. Select the file you saved in CSV format.It will parse and ask for the columns that can be used to mark the places on google map. You need to select latitude and longitude for better accurancy. Select the columns and click on continue.

google map select position

8. Next popup will ask you to select the “title” for your places. You can select any one column as per your wish.

google map select title

9. click on “finish” and your all places will be imported to google map.

Some usefull links:
Google Map import :https://support.google.com/mymaps/answer/3024836

  Comments or questions are welcome  

Multiple Google Map on single page with marker and click event

Sharing below how we can create multiple google map in a single html page with marker and click event. I have added click event to show more detail about the marker like description, but we can also add different functionality like navigating to different page or zoom in or zoom out etc,.

Just copy and past the below code and save the file as “index.html” and open the page in browser you will see two different map with different marker and descriptions.

<html> 
 <head>
 <title>Google Maps API</title>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
 </script>
 <script type="text/javascript">
 function initialize() { 
   var latlngNgp = new google.maps.LatLng(21.1458, 79.0882); 
   var latlngHyd = new google.maps.LatLng(17.3850, 78.4867); 
   var desNgp = "Nagpur is the second capital and the third largest city of the Indian state of Maharashtra after Mumbai and Pune. It is the 13th largest urban agglomeration in India and the largest city in Vidarbha Region."; 
   var desHyd = "Hyderabad is the capital of southern India's Telangana state. A major center for the technology industries."; 
   var ngpOptions = { 
       zoom: 15, 
       center: latlngNgp, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
   }; 
   var hydOptions = { 
       zoom: 15, 
       center: latlngHyd, 
       mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 
   var mapNgp = new google.maps.Map(document.getElementById("nagpur"), ngpOptions); 
   var mapHyd = new google.maps.Map(document.getElementById("hyderabad"), hydOptions); 
   //Adding market to map
   var markerNgp = new google.maps.Marker( { 
                      position: latlngNgp, 
                      map: mapNgp, 
                      title: "Nagpur" 
                   }); 
   var markerHyd = new google.maps.Marker( { 
                      position: latlngHyd, 
                      map: mapHyd, 
                      title: "Hyderabad" 
                   }); 
   var infoWindow = new google.maps.InfoWindow(); 
   
  //Adding click event to marker.
   markerNgp.addListener('click', function() { 
      infoWindow.setContent(desNgp); 
      infoWindow.open(mapNgp, markerNgp); 
   }); 
   markerHyd.addListener('click', function() { 
      infoWindow.setContent(desHyd); 
      infoWindow.open(mapHyd, markerHyd); 
   }); 
 }
 </script>
 </head>
 <body onload="initialize()">
 <div id="nagpur" style="margin:10px;width:510px; height:420px; float: left"></div>
 <div id="hyderabad" style="margin:10px;width:510px; height:420px"></div>
 </body>
</html

Documentation link : Google Map

  Comments or questions are welcome  

Display multiple google map locations using latitude and longitude

Here i am sharing how you can show multiple location on google map using Google API latitude and longitude.
create a html file as “index.html” and add below code your body tag.

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
var markers = [{"lat":"17.454000","lng":"78.434952"},{"title":"shilparamam","lat":"17.452665","lng":"78.435608","description":"Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra."},{"title":"image hospitals","lat":"17.452421","lng":"78.435715","description":"Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai."}];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);

}

// ]]></script></pre>
<div id="dvMap" style="width: 500px; height: 500px;"></div>

Open the file in browser and you will see google map with all locations pointed as below:

multiple location using google map

multiple location using google map


  Comments or questions are welcome  

Adding Google Marker using postal address

You can point market on google Map using specific address:
create a html file as “index.html” and add below code:

 <!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta charset="utf-8">
 <title>Geocoding service</title>
 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
 <script>
var geocoder;
var map;
function codeAddress() {
 var address = document.getElementById('address').value;
 geocoder.geocode( { 'address': address}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 map.setCenter(results[0].geometry.location);
 placeMarker(results[0].geometry.location,map);
 document.getElementById("latitude").value = results[0].geometry.location.lat();
 document.getElementById("longitude").value = results[0].geometry.location.lng();
 
 } else {
 alert('Geocode was not successful for the following reason: ' + status);
 }
 });
}
var marker;
function placeMarker(location,map) {
 if ( marker ) {
 marker.setPosition(location);
 } else {
 marker = new google.maps.Marker({
 position: location,
 map: map
 });
 }
 }
function initialize() {
 geocoder = new google.maps.Geocoder();
 var latlng = new google.maps.LatLng(-34.397, 150.644);
 var mapOptions = {
 zoom: 8,
 center: latlng
 }
 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 google.maps.event.addListener(map, 'click', function (e) {
 document.getElementById("latitude").value = e.latLng.lat();
 document.getElementById("longitude").value = e.latLng.lng();
 placeMarker(e.latLng,map);
 });
}

google.maps.event.addDomListener(window, 'load', initialize);

 </script>
 </head>
 <body>
 <div id="panel">
 <input id="address" type="textbox" value="Sydney, NSW">
 <input type="button" value="Geocode" onclick="codeAddress()">
 </div>
 <div id="map-canvas" style="width: 300px; height: 300px"></div>
 <input type="text" name="latitude" id="latitude"/>
 <input type="text" name="longitude" id="longitude"/>
 </body>
</html>
  Comments or questions are welcome  

Getting latitude and longitude from google maps api

As a client requirement I need to get latitude and longitude of the user on clicking of map. Google API is the best option which can be configure very easily into your application and easy to add/modify.

So I thought of sharing so someone will get something out of it.
Here I am sharing same code…
Create HTML file as “latlong.html” and add the below code inside “<head>” tag

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
<script type="text/javascript">
 window.onload = function () {
 var mapOptions = {
 center: new google.maps.LatLng(17.3828, 78.4815),
 zoom: 14,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var infoWindow = new google.maps.InfoWindow();
 var latlngbounds = new google.maps.LatLngBounds();

 //This will load your map with default location co-ordinates.
 var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

 //To capture click event.
 google.maps.event.addListener(map, 'click', function (e) {
 document.getElementById("latitude").value = e.latLng.lat();
 document.getElementById("longitude").value = e.latLng.lng();
 placeMarker(e.latLng,map);
 });
 }
//Adding marker on click
var marker;
function placeMarker(location,map) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
}
 </script>

On page load here we are loading the google API file and the default location (17.3828, 78.4815). Additionally are we are handling the click event to capture latitude and longitude and setting the marker.

Now you need to set HTML as below. Copy below HTML and past inside body tag.

<div id="dvMap" style="width: 300px; height: 300px"> <div>
<input id="latitude" name="latitude" type="text">
<input id="longitude" name="longitude" type="text">

Now if you access the page in browser map will get render with 300 height and width. And on click on any location text boxes get filled with latitude and longitude.

Enjoy!!!

  Comments or questions are welcome