You may be building a website that has plugins or modules to deal with google maps, but, you may be working on a site that does not have modules or plugins available. In that event, you can use the following code to create a function that allow you to enter either longitude\/latitude or address for mapping.<\/p>\n
The following code clip will allow you to display a map with markers and associated pop-up bubble. You can add as many markers as you would like, with an equal number of pop-up information bubbles. You can place the markers by specifying an address, or a longitude and latitude.<\/p>\n
\r\n<style type=\"text\/css\">\r\n .entry-content { max-width:none ; }\r\n #bubble { height: 50px ; -moz-border-radius: 10px; \r\n -webkit-border-radius: 10px; -khtml-border-radius: 10px; \r\n border-radius: 10px; }\r\n<\/style>\r\n<script type=\"text\/javascript\" \r\n src=\"http:\/\/maps.googleapis.com\/maps\/api\/js?sensor=false\"> <\/script>\r\n<script type=\"text\/javascript\">\r\n function map_initialize() {\r\n geocoder = new google.maps.Geocoder();\r\n var latlng = new google.maps.LatLng(-34.397, 150.644);\r\n var myOptions = {\r\n zoom: 12,\r\n center: latlng,\r\n mapTypeId: google.maps.MapTypeId.SATELLITE\r\n }\r\n d_map = new google.maps.Map(document.getElementById(\"map-me\"), \r\n myOptions);\r\n mapIt(999, 999, \"Crescent City, CA\", \r\n \"http:\/\/www.advancedwebhelp.com\/blog\/wp-content\/uploads\/2013\/11\/marker.png\",\r\n \"label to see on hover of marker\", \r\n \"<'div id='bubble'>Say something in the pop-up bubble<\/div>\", \r\n \"http:\/\/www.mydomain.com\/link\") ; \r\n }\r\n function mapIt(lat, lng, address, image, label, bubble, alink) {\r\n if (lat != 999) {\r\n var myLatLong = new google.maps.LatLng(lat,lng) ;\r\n d_map.setCenter(myLatLong);\r\n var link = alink ;\r\n var contentString = '<div class=\"marker_content\">'+ \r\n '<a href=\"' + link + '\">' + bubble + \r\n '<\/a><\/div>';\r\n var infowindow = new google.maps.InfoWindow({\r\n content: contentString\r\n });\r\n var marker = new google.maps.Marker({\r\n map: d_map,\r\n icon: image,\r\n title: label,\r\n position: myLatLong\r\n });\r\n google.maps.event.addListener(marker, 'click', function() {\r\n infowindow.open(d_map,marker);\r\n });\r\n } else {\r\n geocoder.geocode( { 'address': address}, function(results, status) {\r\n if (status == google.maps.GeocoderStatus.OK) {\r\n d_map.setCenter(results[0].geometry.location);\r\n var link = alink ;\r\n var contentString = '<div class=\"marker_content\">' + \r\n '<a href=\"' + link + '\">' + bubble + '<\/a><\/div><p>';\r\n var infowindow = new google.maps.InfoWindow({\r\n content: contentString\r\n });\r\n var marker = new google.maps.Marker({\r\n map: d_map,\r\n icon: image,\r\n title: label,\r\n position: results[0].geometry.location\r\n });\r\n google.maps.event.addListener(marker, 'click', function() {\r\n infowindow.open(d_map,marker);\r\n });\r\n } else { alert(\"Geocode was not successful \r\n for the following reason: \" + status); }\r\n });\r\n }\r\n }\r\n jQuery(function() {\r\n map_initialize() ; \r\n }) ;\r\n<\/script>\r\n<\/code><\/pre>\nSample<\/p>\n
\n If you see this, JavaScript not supported.\n<\/div>\nI should mention several things about the above code:<\/p>\n
\n- In the declaration of the div for map-me, you can change the width and height of the map.<\/li>\n
- In the declaration of var myLatLng in map_initialize(), you can change the longitude and latitude that will be used for the center of the map<\/li>\n
- In the declaration of myOptions in map_initialize(), you can change the type of map, and zoom to meet your needs<\/li>\n
- You may make multiple calls to mapIt() to insert markers on the map.<\/li>\n
- If you do not use the latitude and longitude in mapIt, use values 999,999.<\/li>\n
- In mapIt, you include the flag for the marker, so, you can make every marker can look different.<\/li>\n
- In mapIt, you can pass the content used in the bubble for the marker … it can include HTML.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
You may be building a website that has plugins or modules to deal with google maps, but, you may be working on a site that does not have modules or plugins available. In that event, you can use the following code to create a function that allow you to enter either longitude\/latitude or address for […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,13],"tags":[],"class_list":["post-488","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/488","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/comments?post=488"}],"version-history":[{"count":2,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/488\/revisions"}],"predecessor-version":[{"id":530,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/488\/revisions\/530"}],"wp:attachment":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/media?parent=488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/categories?post=488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/tags?post=488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}